import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Tag, Drawer, Input, Select, Tree, message } from 'antd'
import { getAdminList, addAdmin } from '../../api/admin'
import menus from '../../router/menus'
function AdminList() {
  // 1.
  const [ adminList, setAdminList ] = useState([])
  useEffect(() => {
    getAdminList().then(res => {
      // console.log(res.data)
      setAdminList(res.data.data)
    })
  }, [])

  // 2.控制添加管理员的抽屉效果的实现
  const [visible, setVisible] = useState(false)
  // 3. 表单信息
  const [ adminname, setAdminName ] = useState('')
  const [ password, setPassword ] = useState('')
  const [ role, setRole ] = useState(1)
  // 4.控制树形控件哪些被选中
  const [ checkedKeys, setCheckedKeys ] = useState(['0-0'])

  // 5.添加管理员
  const addAdminFn = () => {
    const data = {
      adminname, password, role, checkedKeys
    }
    // console.log(data)
    addAdmin(data).then(res => {
      // 6.添加成功，清除表单的信息，关闭抽屉，重新请求列表的数据
      if (res.data.code === '10004') {
        message.warning('管理员已存在')
      } else {
        setAdminName('')
        setPassword('')
        setRole(1)
        setCheckedKeys(['0-0'])
        setVisible(false)
        getAdminList().then(res => setAdminList(res.data.data))
      }
      
    })
  }

  // 1
  const columns = [
    {
      title: '序号',
      render (text, record, index) {
        return <span>{ index + 1}</span>
      }
    },
    {
      title: '管理员账户',
      dataIndex: 'adminname'
    },
    {
      title: '角色',
      dataIndex: 'role', // 2 超级管理员  1 管理员
      render (text) {
        return text === 2 ? <Tag color="green">超级管理员</Tag> :
        <Tag color="cyan">管理员</Tag>
      }
    },
    {
      title: '操作',
      render (text, record) {
        return (
          <Space>
            <Button type="dashed">编辑</Button>
            <Button type="danger">删除</Button>
          </Space>
        )
      }
    }
  ]
  return (
    <Space direction="vertical" style = {{ width: '100%' }}>
      <Button type="primary" onClick = { () => { setVisible(true) }}>添加管理员</Button>
      <Table 
        dataSource = { adminList } 
        columns = { columns } 
        rowKey = "adminid" />

      {/* 2.添加管理员的抽屉的代码 */}
      <Drawer
        width = { 500 }
        title="添加管理员账户" 
        placement="right" 
        onClose={ () => { setVisible(false) }} 
        visible={visible}>
          {/* 3.添加管理员的表单 */}
          <Space direction="vertical" style = {{ width: '100%'}}>
            <Input placeholder="管理员账户" value = { adminname } onChange = { event => setAdminName(event.target.value) }/>
            <Input type="password" placeholder="密码"  value = { password } onChange = { event => setPassword(event.target.value) }/>
            <Select defaultValue={1} style = {{ width: '100%' }}
               value = { role } onChange = { value => setRole(value) }
            >
              <Select.Option value={ 1 }>管理员</Select.Option>
              <Select.Option value={ 2 }>超级管理员</Select.Option>
            </Select>
            <div>
              <h3>选择该管理员拥有的权限</h3>
              {/* 4.树形结构 */}
              <Tree
                checkable
                defaultExpandAll={true}
                checkedKeys = { checkedKeys }
                onCheck={ (checkedKeys) => {
                  // console.log(checkedKeys)
                  setCheckedKeys(checkedKeys)
                }}
                treeData={menus}
              />
            </div>
            <Button type="primary" onClick={ addAdminFn }>添加</Button>
          </Space>
      </Drawer>
    </Space>
  )
}

export default AdminList
